<template>
  <view>
    <Search />

    <view class="cate">
      <scroll-view class="cate_left" scroll-y>
        <view
          v-for="(item,index) in cateLeft"
          :key="item.cat_id"
          class="cate_left_item"
          :class="{
            active:activeIndex === index
            }"
          @tap="changeIndex(index)"
          >{{ item.cat_name }}</view
        >
      </scroll-view>
      <scroll-view class="cate_right" scroll-y>
        <view class="floor" v-for="item in cateRight" :key="item.cat_id">
          <view class="title">{{ item.cat_name }}</view>
          <view class="list">
            <navigator
            :url="`/pages/goods_list/main?cid=${item2.cat_id}`"
              class="item"
              v-for="item2 in item.children"
              :key="item2.cat_id"
            >
              <image class="item_img" :src="item2.cat_icon" mode="aspectFill" />
              <text class="item_text">{{item2.cat_name}}</text>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search/index.vue";
import { getCategories } from '@/api';
export default {
  components: {
    Search,
  },
  data() {
    return {
      cateLeft: [],
      cateRight: [],
      activeIndex:0,
      cateAll:[]
    };
  },
  methods:{
    changeIndex(index){
      this.activeIndex = index
      // 更换右边的内容
      this.cateRight = this.cateAll[index].children
    },
    async getcateData(){
      const res = await getCategories();
      const cateAll = res.data.message;
       uni.setStorageSync('cateAll', this.cateAll);
        // 把保存到本地存储的时间也存起来
        uni.setStorageSync('cateAllTime', Date.now());
        this.initData(cateAll);
    },
    initData(cateAll){
      this.cateAll = cateAll;
        this.cateLeft = cateAll.map((item) => {
          return{
            cat_name: item.cat_name,
            cat_id: item.cat_id,
          }
        });
        this.cateRight = cateAll[0].children;
    }
  },
  onLoad() {
    // 如果本地存储中没有数据 才去请求
    const cateAll = uni.getStorageSync('cateAll')
    if(cateAll.length === 0){
      this.getcateData()
    }else{
      const now = Date.now();
      const old = uni.getStorageSync('cateAllTime')
      if(now - old >= 30 * 60 * 1000){
        this.getcateData();
      }else{
        this.initData(cateAll)
      }
    }
  },
};
</script>

<style lang="less" scoped>

.cate {
  display: flex;
  .cate_left {
    width: 182rpx;
    height: calc(100vh - 100rpx);
    background-color: #F3F3F3;
    .cate_left_item {
      height: 86rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      &.active{
        color:#EA4350;
        &::before{
          content:"";
          width: 4rpx;
          height: 44rpx;
          background-color: #EA4350;
          position: absolute;
          left: 0;
        }
      }
    }
  }

  .cate_right {
        flex: 1;
    height: calc(100vh - 100rpx);
    background-color: #fff;
    .floor {
      .title {
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        &::before,
        &::after{
          content: "/";
          color: #ccc;
          margin: 0 8rpx;
        }
      }

      .list {
        display: flex;
        flex-wrap: wrap;
        .item {
          width: 33.3%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 30rpx;
          .item_img {
            width: 120rpx;
            height: 120rpx;
          }

          .item_text {
            font-size: 22rpx;
          }
        }
      }
    }
  }
}

</style>